<template>
    <div class="">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-copy"></i> 消息管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-tabs v-model="message"  @tab-click="handleClick">
                <el-tab-pane :label="`未读消息(${pageTotal})`" name="first">
                    <el-table :data="tableData" v-loading="loading" :show-header="false" style="width: 100%">
                        <el-table-column>
                            <template slot-scope="scope">
                                <span class="message-title">{{scope.row.title}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="date" width="180"></el-table-column>
                        <el-table-column width="120">
                            <template slot-scope="scope">
                                <el-button size="small" @click="handleRead(scope.row.messageUserId)">标为已读</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pagination">
                        <el-pagination
                                background
                                layout="total, prev, pager, next"
                                :current-page="query.current"
                                :page-size="query.size"
                                :total="pageTotal"
                                @current-change="handlePageChange"
                        ></el-pagination>
                    </div>
                    <div class="handle-row">
                        <el-button type="primary" @click="handleReadAll">全部标为已读</el-button>
                    </div>
                </el-tab-pane>
                <el-tab-pane :label="`已读消息(${pageTotal1})`" name="second">
                    <template v-if="message === 'second'">
                        <el-table :data="tableData1" v-loading="loading1" :show-header="false" style="width: 100%">
                            <el-table-column>
                                <template slot-scope="scope">
                                    <span class="message-title">{{scope.row.title}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="date" width="150"></el-table-column>
                            <el-table-column width="120">
                                <template slot-scope="scope">
                                    <el-button type="danger" @click="handleDel(scope.row.messageUserId)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="pagination">
                            <el-pagination
                                    background
                                    layout="total, prev, pager, next"
                                    :current-page="query1.current"
                                    :page-size="query1.size"
                                    :total="pageTotal1"
                                    @current-change="handlePageChange1"
                            ></el-pagination>
                        </div>
                        <div class="handle-row">
                            <el-button type="danger" @click="handleDelAll">删除全部</el-button>
                        </div>
                    </template>
                </el-tab-pane>
                <el-tab-pane :label="`回收站(${pageTotal2})`" name="third">
                    <template v-if="message === 'third'">
                        <el-table :data="tableData2" v-loading="loading2" :show-header="false" style="width: 100%">
                            <el-table-column>
                                <template slot-scope="scope">
                                    <span class="message-title">{{scope.row.title}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="date" width="150"></el-table-column>
                            <el-table-column width="120">
                                <template slot-scope="scope">
                                    <el-button @click="handleRestore(scope.row.messageUserId)">还原</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="pagination">
                            <el-pagination
                                    background
                                    layout="total, prev, pager, next"
                                    :current-page="query2.current"
                                    :page-size="query2.size"
                                    :total="pageTotal2"
                                    @current-change="handlePageChange2"
                            ></el-pagination>
                        </div>
                        <!--<div class="handle-row">
                            <el-button type="danger" >清空回收站</el-button>
                        </div>-->
                    </template>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
    import { sysMessagePage,updateSysMessageStatus,updateSysMessageStatusByUser } from '../../api/sysMessage';

    export default {
        name: 'tabs',
        data() {
            return {
                // 遮罩层
                loading: true,
                loading1: true,
                loading2: true,
                message: 'first',
                showHeader: false,
                query: {
                    status:"1",
                    current: 1,
                    size: 10
                },
                tableData: [],
                pageTotal: 0,
                query1: {
                    status:"2",
                    current: 1,
                    size: 10
                },
                tableData1: [],
                pageTotal1: 0,
                query2: {
                    status:"3",
                    current: 1,
                    size: 10
                },
                tableData2: [],
                pageTotal2: 0
            }
        },
        created() {
            this.getData();
            this.getData1();
            this.getData2();
        },
        methods: {
            handleClick(tab, event) {
                if (tab.index == 0) {
                    this.getData();
                }
                if (tab.index == 1) {
                    this.getData1();
                }
                if (tab.index == 2) {
                    this.getData2();
                }
            },
            getData() {
                this.loading = true;
                sysMessagePage(this.query).then(res => {
                    this.loading = false;
                    this.tableData = res.data;
                    this.pageTotal = res.count;
                });
            },
            getData1() {
                this.loading1 = true;
                sysMessagePage(this.query1).then(res => {
                    this.loading1 = false;
                    this.tableData1 = res.data;
                    this.pageTotal1 = res.count;
                });
            },
            getData2() {
                this.loading2 = true;
                sysMessagePage(this.query2).then(res => {
                    this.loading2 = false;
                    this.tableData2 = res.data;
                    this.pageTotal2 = res.count;
                });
            },
            handleRead(messageUserId) {
                // 读取数据
                updateSysMessageStatus({messageUserId:messageUserId,status:"2"}).then(res => {
                    if (res.code == 0) {
                        this.$message.success(`修改成功`);
                        this.getData();
                        this.getData1();
                        this.getData2();
                    } else {
                        this.$message.error(res.msg);
                        return false;
                    }
                });
            },
            handleDel(messageUserId) {
                // 读取数据
                updateSysMessageStatus({messageUserId:messageUserId,status:"3"}).then(res => {
                    if (res.code == 0) {
                        this.$message.success(`修改成功`);
                        this.getData();
                        this.getData1();
                        this.getData2();
                    } else {
                        this.$message.error(res.msg);
                        return false;
                    }
                });
            },
            handleRestore(messageUserId) {
                // 读取数据
                updateSysMessageStatus({messageUserId:messageUserId,status:"2"}).then(res => {
                    if (res.code == 0) {
                        this.$message.success(`修改成功`);
                        this.getData();
                        this.getData1();
                        this.getData2();
                    } else {
                        this.$message.error(res.msg);
                        return false;
                    }
                });
            },
            handleReadAll(){
                updateSysMessageStatusByUser({status:"2"}).then(res => {
                    if (res.code == 0) {
                        this.$message.success(`修改成功`);
                        this.getData();
                        this.getData1();
                        this.getData2();
                    } else {
                        this.$message.error(res.msg);
                        return false;
                    }
                });
            },
            handleDelAll(){
                updateSysMessageStatusByUser({status:"3"}).then(res => {
                    if (res.code == 0) {
                        this.$message.success(`修改成功`);
                        this.getData();
                        this.getData1();
                        this.getData2();
                    } else {
                        this.$message.error(res.msg);
                        return false;
                    }
                });
            },
            // 分页导航
            handlePageChange(val) {
                this.$set(this.query, 'current', val);
                this.getData();
            },
            handlePageChange1(val) {
                this.$set(this.query1, 'current', val);
                this.getData1();
            },
            handlePageChange2(val) {
                this.$set(this.query2, 'current', val);
                this.getData2();
            }
        },
        computed: {
            unreadNum(){
                return this.unread.length;
            }
        }
    }

</script>

<style>
.message-title{
    cursor: pointer;
}
.handle-row{
    margin-top: 30px;
}
</style>

